<template>
	<div>
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{$store.state.company.companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>智能装备</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path:`/IntelligentEquipment/myEquipment/digitalBase?t=${new Date().getTime()}`}">数字配件</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="tableNavBox">
			<div class="tableBoxTable" style="margin-bottom: 50px;">
				<div class="menberConTitle flex" style="justify-content: space-between;">
					<div class="tableTitle">配件基本信息</div>
				</div>
				<formTemplate :formSet="formSet1" :postData="formData1" class="baseadd">
					<template slot="groupName" slot-scope="scope">
						<el-form-item label="产品分组：" style="width:550px">
							<el-select
  							  	v-model="formData1.groupName"
  							  	filterable
								allow-create
								default-first-option
  							  	placeholder="请输入"
								style="width:500px"
								@change="handleChange">
  							  	<el-option
  							  	  v-for="(item,i) in optionData.groupName"
  							  	  :key="i"
  							  	  :label="item.groupName"
      							  :value="item.id">
  							  	</el-option>
  							</el-select>
						</el-form-item>
            		</template>
				</formTemplate>
				<div class="menberConTitle flex" style="justify-content: space-between;">
					<div class="tableTitle">供应商信息</div>
				</div>
				<formTemplate :formSet="formSet2" :postData="formData1" class="baseadd" :optionData="optionData" @radioInputChange='radioInputChange'>
					<template slot="price" slot-scope="scope">
						<div style="display:flex; justify-content:flex-start;">
							<el-form-item label="预算单价：" style="width:550px;">
								<el-input type="number" v-model="formData1.price" style="width:420px;"></el-input>
							</el-form-item>
							<el-checkbox :true-label="1" :false-label="0" checked style="width:100px;padding-top:5px">公开</el-checkbox>
						</div>
            		</template>
				</formTemplate>
				<div class="menberConTitle flex" style="justify-content: space-between; margin-buttom:5px">
					<div class="tableTitle">配件特征</div>
				</div>
				<el-input
				  type="textarea"
				  :rows="6"
				  placeholder="请输入内容"
				  v-model="formData1.equipmentFeature"
				  style="padding:0 20px">
				</el-input>
			</div>
			<div class="btnBox">
				<el-button round @click="$router.go(-1)">返回</el-button>
				<el-button type="primary" round @click="submitData">保存</el-button>
				<el-button type="danger" v-if="isDetail == true" round @click="deleteData">删除</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import formTemplate from '@/components/form.vue'
	import tableForm from '@/components/tableForm.vue'
	export default {
		components: {
			tableForm,
			formTemplate
		},
		data() {
			return {
				dialogVisible:false,
				formSet1:[
                    { span: 24, label: '产品分组：', prop: 'groupName', type: 'slot', disabled:false ,labelWidth:'550px'},
                    { span: 24, label: '产品名称：', prop: 'equipmentName', type: 'input' , disabled:false,labelWidth:'550px'},
                    { span: 24, label: '产品规格描述：', prop: 'equipmentDesc', type: 'input',labelWidth:'550px'},
                ],
				formSet2:[
                    { span: 24, label: '配件供应商：', prop: 'supplierName', type: 'radio_custom', disabled:false ,labelWidth:'550px'},
                    { span: 24, label: '产品型号：', prop: 'equipmentModel', type: 'radio_custom' , disabled:false,labelWidth:'550px'},
                    { span: 24, label: '采购网址：', prop: 'supplierUrl', type: 'input',labelWidth:'550px'},
                    { span: 24, label: '计量单位：', prop: 'company', type: 'input',labelWidth:'550px'},
                    { span: 24, label: '预算单价：', prop: 'price', type: 'slot',labelWidth:'550px'},
                ],
				formData1:{
					groupId:'',
					groupName:'',
					equipmentType:'DIGITALACCESSORIES',
					isPrice:1
				},
				companyId: this.$store.state.company.companyId,
				companyName: this.$store.state.company.companyName,
				userId: this.$store.state.user.userInfo.id,
				optionData:{
					custom:{
						supplierName:{},
						equipmentModel:{},
						b:{},
						d:{},
						e:{},
						f:{},
					},
					supplierName:[{label:'备选1',value:'1'},{label:'备选2',value:'2'},],
					equipmentModel:[],
				},
				loading:false,
				isDetail:false, // 是否为详情页
			}
		},
		created() {
			this.$store.commit('digitalOrchard_leftNavIndex', 11)
			if(this.$route.query.id){
				this.getDeviceDetailsById(this.$route.query.id)
			}
				this.getGroup()
				this.getPartsSuppliers()  
		},
		mounted() {
		},
		watch: {
			'formData1.supplierName'(e){
				if(this.formData1.supplierName){
					this.getModelBySuppliers()
				}
			}
		},
		methods: {
			radioInputChange(e){//radio自定义强制选中刷新
				this.$set(this.formData1,e.prop,e.e);
			},
			handleChange(e){
				let flag = false
				this.optionData.groupName.forEach(item => {
					if(item.id == e){
						flag = true
						this.formData1.groupId = e
						this.formData1.groupName = item.groupName
					}
				});
				if(flag === false){
					this.formData1.groupId = ''
				}
			},
			getPartsSuppliers(){
				this.$request.postForm(this.$api.getPartsSuppliers, {
					companyId:this.companyId,
					equipType:'DIGITALACCESSORIES'
				}).then(res=>{
					if(res.code == 200){
						let a = []
						a = res.data.map(item =>{
							return{
								label:item,
								value:item
							}
						})
						this.$set(this.optionData,'supplierName',a)
					}
				})
			},
			getModelBySuppliers(){
				this.$request.postForm(this.$api.getModelBySuppliers, {
					companyId:this.companyId,
					suppliers:this.formData1.supplierName,
					equipType:'DIGITALACCESSORIES'
				}).then(res=>{
					if(res.code == 200){
						let a = []
						a = res.data.map(item =>{
							return{
								label:item,
								value:item
							}
						})
						this.$set(this.optionData,'equipmentModel',a)
					}
				})
			},
			getGroup(){
				this.$request.postForm(this.$api.getGroup, {
					companyId:this.companyId,
					groupType:'DIGITALACCESSORIES'
				}).then(res=>{
						if(res.code == 200){
							this.$set(this.optionData,'groupName',res.data)
						}
					})
			},
			submitData(){
				this.formData1.companyId = this.companyId,
				this.formData1.userId = this.userId
				if(this.isDetail){
					this.$request.postJson(this.$api.updateParts,JSON.stringify(this.formData1)).then(res=>{
						if(res.code == 200){
							this.$message.success(res.message)
							this.$router.push(`/IntelligentEquipment/myEquipment/digitalBase?t=${new Date().getTime()}`)
						}
					})
				}else{
					this.$request.postJson(this.$api.saveParts,JSON.stringify(this.formData1)).then(res=>{
						if(res.code == 200){
							this.$message.success(res.message)
							this.$router.push(`/IntelligentEquipment/myEquipment/digitalBase?t=${new Date().getTime()}`)
						}
					})
				}
			},
			getDeviceDetailsById(e){
				this.$request.postForm(this.$api.getDeviceDetailsById, {
					id:e,
					userId:this.userId
				}).then(res=>{
						if(res.code == 200){
							this.formData1 = res.data
							this.isDetail = true
						}
					})
			},
			deleteData(){
				this.$confirm('确定要删除吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.postForm(this.$api.deletePartsById, {
						id:this.formData1.id,
					}).then(res=>{
							if(res.code == 200){
								this.$message.success(res.message)
								this.$router.push(`/IntelligentEquipment/myEquipment/digitalBase?t=${new Date().getTime()}`)
							}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
		
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 15px;
		margin-top: 10px;
	}

	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}

	.isdelete {
		color: #F42929;
	}
	.btnBox {
		width: 100%;
		padding-top: 15px;
		border-top: 1px solid #DCDCDC;
		text-align: center;
		.el-button{
			width: 120px;
			margin-right: 5px;
		}
	}
</style>
